<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<body>
    <div id="app">
        <!--<router-link to="/content">内容</router-link>-->
        <router-view></router-view>
    </div>

    <script type="text/x-template" id="home">
        <div>
            <li v-for=" v in news" >
                <router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link>
            </li>
            <router-view></router-view>
        </div>
    </script>

    <script type="text/x-template" id="content">
        <div>
            <h1>{{filed.title}}</h1>
            <p>{{filed.content}}</p>
        </div>
    </script>


<script>
    var news=[
        {id:1,title:'前端申',content:'前端申的内容'},
        {id:2,title:'后端君',content:'后端君的内容'}
    ];
    const home={
        template:'#home',
        data(){
            return{
                news:news
            };

        },
    };
    const content={
        template:'#content',
        data(){
          return{
              id:0,
              filed:{}

          }
        },
        watch:{
          '$route'(to,from){
              console.log(to+'to------from'+from)
              this.load();
          }
        },
        mounted(){
           // alert('mounted')
          this.id=this.$route.params.id;
          this.filed=this.$route.params;
            this.filed=news[this.$route.params.id-1];
        },
        methods:{
            load(){
                this.id=this.$route.params.id;
                this.filed=this.$route.params;
                this.filed=news[this.$route.params.id-1];
            },

            show(){
                console.log(this.$route.params.id);
            }
        }

    };
    //组件交给路由器
    let route = new VueRouter({
        routes:[
            {path:'/',component:home,children:[
                {path:'/content/:id?',component:content,name:'content'},
            ]},
        ]
    });


    var app=new Vue({
        el:'#app',
        router:route,
    });

</script>

</body>
</html>